<template>
  <div>
    <div class="top">
      <div class="fl top-left">题库列表</div>
      <el-input
        size="mini"
        class="fr top-right"
        suffix-icon="el-icon-search"
        clearable
        v-model="tiaojian.name"
        @input="getData()"
        placeholder="请输入您要搜索的题目"
      />
    </div>
    <div class="body">
      <div class="head">
        <div class="fl">题型：</div>
        <el-select
          size="mini"
          clearable
          filterable
          v-model="tiaojian.typeId"
          @change="getData()"
          style="float: left; width: 150px; margin-right: 20px"
        >
          <el-option
            v-for="item in type_tixing"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <div class="fl">难度：</div>
        <el-select
          size="mini"
          clearable
          filterable
          v-model="tiaojian.levelId"
          @change="getData()"
          style="float: left; width: 150px; margin-right: 20px"
        >
          <el-option
            v-for="item in type_nandu"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-button
        type="primary"
        size="mini"
        style="margin-top: 10px; margin-bottom: 10px"
        @click="add()"
        >新增题</el-button
      >
      <el-table
        :header-cell-style="{
          'background-color': '#FAFAFA',
          height: '54px',
          color: '#000000',
          'font-size': '14px',
          'font-weight': 'bold',
        }"
        :data="tableData"
        size="mini"
        empty-text="暂无数据"
        stripe
        style="width: 100%"
      >
        <!-- <el-table-column label="岗位" width="150">
          <template slot-scope="scope">
            <span class="shenglue">{{ scope.row.positionName || "-" }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="类型" align="center" width="100">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              v-if="scope.row.typeName == '单选题'"
              type="danger"
              >{{ scope.row.typeName }}</el-tag
            >
            <el-tag
              size="mini"
              v-else-if="scope.row.typeName == '多选题'"
              type="success"
              >{{ scope.row.typeName }}</el-tag
            >
            <el-tag size="mini" v-else-if="scope.row.typeName == '案例题'">{{
              scope.row.typeName
            }}</el-tag>
            <el-tag size="mini" v-else type="warning">{{
              scope.row.typeName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="难度" align="center" width="90">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              v-if="scope.row.levelName == '简单'"
              type="danger"
              >{{ scope.row.levelName }}</el-tag
            >
            <el-tag
              size="mini"
              v-else-if="scope.row.levelName == '中等'"
              type="success"
              >{{ scope.row.levelName }}</el-tag
            >
            <el-tag size="mini" v-else type="warning">{{
              scope.row.levelName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="题目">
          <template slot-scope="scope">
            <span
              :title="scope.row.titleDescription"
              class="shenglue"
              v-html="scope.row.titleDescription1"
            ></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                xiugai(scope.row);
                index = scope.$index;
              "
              title="查看详情并修改"
              >查看/修改</el-button
            >
            <el-button
              v-if="scope.row.logicallyDelete"
              type="text"
              @click="tingyong(scope.row, false)"
              >启用</el-button
            >
            <el-button
              v-else
              type="text"
              style="color: red"
              @click="tingyong(scope.row, true)"
              >停用</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="shanchu(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 100%; height: 30px; margin-top: 24px">
        <el-pagination
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :hide-on-single-page="false"
          :current-page="tiaojian.page"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="tiaojian.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="试题数据"
      :close-on-click-modal="false"
      width="90%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">题型：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-select
              size="mini"
              :disabled="form.id > 0"
              v-model="form.typeId"
              style="width: 100%"
            >
              <el-option
                v-for="item in type_tixing"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">难度：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-select
              size="mini"
              filterable
              v-model="form.levelId"
              style="width: 100%"
            >
              <el-option
                v-for="item in type_nandu"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">出题人：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="mini" v-model="form.questioner" />
          </el-col>
          <!-- <el-col v-if="form.typeId==3||form.typeId==4" class="mb" :span="span1">
            <span class="mt">考核时间：</span>
          </el-col>
          <el-col v-if="form.typeId==3||form.typeId==4" class="fl" :span="span2">
            <el-input size="mini" type="number" min="0" v-model="form.name">
              <template slot="append">分钟</template>
            </el-input>
          </el-col> -->
        </el-row>

        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">题目：</span>
          </el-col>
          <el-col class="mb" :span="24 - span1">
            <el-input
              size="mini"
              type="textarea"
              v-model="form.titleDescription"
            />
          </el-col>
        </el-row>

        <el-row
          v-show="form.typeId == 1 || form.typeId == 2"
          v-for="(item, index) in xuanze"
          :key="index"
        >
          <el-col class="mb" :span="span1">
            <span class="mt">选项{{ zimu[index] }}：</span>
          </el-col>
          <el-col class="mb" :span="24 - span1">
            <el-input size="mini" class="xuanze-input" v-model="item.title">
              <template slot="append">
                <div
                  v-if="item.value"
                  style="width: 20px; font-size: 20px; color: green"
                >
                  ✔
                </div>
                <div v-else style="width: 20px; font-size: 20px; color: red">
                  ❌
                </div>
              </template>
            </el-input>
            <div class="fr">
              <el-button
                v-if="form.typeId == 1"
                type="primary"
                :disabled="item.value"
                size="mini"
                @click="shezhi(index, false)"
                >设为正确</el-button
              >
              <el-button
                v-if="form.typeId == 2 && item.value"
                type="info"
                size="mini"
                @click="shezhi(index, true)"
                >设为错误</el-button
              >
              <el-button
                v-if="form.typeId == 2 && !item.value"
                type="primary"
                size="mini"
                @click="shezhi(index, true)"
                >设为正确</el-button
              >
              <!-- <el-button class="fr" type="danger" :disabled="xuanze.length<5" size="mini" @click="deleteSelect(index)">删除选项</el-button>
              <el-button class="fr" type="primary" size="mini" @click="addSelect()">添加选项</el-button> -->
              <el-button
                title="添加一个选项"
                type="primary"
                size="mini"
                icon="el-icon-circle-plus-outline"
                circle
                @click="addSelect(index)"
              ></el-button>
              <el-button
                title="删除一个选项,选项数量最少为四项"
                type="danger"
                :disabled="xuanze.length < 5"
                size="mini"
                icon="el-icon-delete"
                circle
                @click="deleteSelect(index)"
              ></el-button>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="form.typeId == 3">
          <el-col class="mb" :span="span1">
            <span class="mt">所需材料：</span>
          </el-col>
          <el-col class="mb" :span="24 - span1">
            <el-input size="mini" type="textarea" v-model="cailiao.text" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">图片材料：</span>
          </el-col>
          <el-col class="mb" :span="24 - span1">
            <el-upload
              :action="url"
              list-type="picture-card"
              :file-list="imageUrls"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-row>
        <el-row v-if="form.typeId == 3 || form.typeId == 4">
          <el-col class="mb" :span="span1">
            <span class="mt">答案：</span>
          </el-col>
          <el-col class="mb" :span="24 - span1">
            <el-input size="mini" type="textarea" v-model="form.answer" />
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">解析：</span>
          </el-col>
          <el-col class="mb" :span="24 - span1">
            <el-input size="mini" type="textarea" v-model="form.analyses" />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="form.id == ''" @click="next()">继续添加题目</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          :disabled="form.leftClassTimes === '' || form.totalClassTimes === ''"
          type="primary"
          @click="submit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import $http from "@/utils/request";
import $httpJSON from "@/utils/requestJSON";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      url: "",
      index: 0,
      dialogVisible: false,
      dialogFormVisible: false,
      dialogImageUrl: "",
      span1: 3,
      span2: 3,
      cailiao: {
        text: "",
        images: [],
      },
      tiaojians: [],
      dialog_tiaojians: [],
      imageUrls: [],
      type_tixing: [],
      type_nandu: [],
      tableData: [],
      type_all: [],
      type_jibie: [],
      type_leibie: [],
      type_gangwei: [],
      type_zhuanye: [],
      total: 0,
      repositoryType: 1, // 题库类型，专业题库是2，通用图库是1
      tiaojian: {
        page: 1,
        size: 10,
        departmentId: "", //部门id
        levelId: "", // 题目难度id
        positionId: "", // 岗位id
        professionId: "", // 专业id
        rankId: "", // 级别id
        status: "", // 题目状态，默认查所有，true查未删除的，false查已经逻辑删除的
        typeId: "", // 题目类型
      },
      xuanze: [], // 选择的选项
      zimu: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ], // 字母数组
      xuanzeDaan: [], // 多选的答案
      form: {
        analyses: "",
        answer: "",
        createDatetime: "",
        departmentId: "",
        id: "",
        levelId: 1, // 难度，必填
        logicallyDelete: "", // 题目状态
        options: "",
        optionsId: "", //选项表id，更新时必传
        positionId: "",
        professionId: "",
        questioner: "",
        rankId: "",
        repositoryId: 1, //仓库类型标识,通用题库是1，专业题库是2
        title: "", // 问题的图片，多个图片用逗号分隔开
        titleDescription: "", // 问题描述
        titleId: "", // 问题图片表id
        typeId: 1, // 问题类型，必填
      },
    };
  },
  watch: {
    "form.typeId"() {
      if (this.form.typeId == 1) {
        this.xuanze = [
          {
            name: "A",
            title: "",
            value: false,
          },
          {
            name: "B",
            title: "",
            value: false,
          },
          {
            name: "C",
            title: "",
            value: false,
          },
          {
            name: "D",
            title: "",
            value: false,
          },
        ];
      }
    },
  },
  mounted() {
    this.url = localStorage.getItem("basePath") + "/file/upload/eimage";
    this.getTixing();
    this.getNandu();
    this.getData();
    this.getAll();
    // this.getJibie()
    // this.getLeibie()
    this.getGangwei();
    // this.getZhuanye()
  },
  methods: {
    shezhi(index, pd) {
      let xuanze = [...this.xuanze];
      if (pd) {
        xuanze[index].value = !xuanze[index].value;
      } else {
        for (let i = 0; i < xuanze.length; i++) {
          if (index == i) {
            xuanze[i].value = true;
          } else {
            xuanze[i].value = false;
          }
        }
      }
      this.xuanze = xuanze;
    },
    addSelect(index) {
      let num = 27;
      if (this.xuanze.length < num) {
        this.xuanze.splice(index + 1, 0, {
          name: this.zimu[this.xuanze.length],
          value: false,
          title: "",
        });
      } else {
        this.$message.error("选项数量不能超过" + num);
      }
    },
    deleteSelect(index) {
      this.xuanze.splice(index, 1);
    },
    chongzhi() {
      this.tiaojian = {
        page: 1,
        size: 10,
        departmentId: "", //部门id
        levelId: "", // 题目难度id
        positionId: "", // 岗位id
        professionId: "", // 专业id
        rankId: "", // 级别id
        status: "", // 题目状态，默认查所有，true查未删除的，false查已经逻辑删除的
        typeId: "", // 题目类型
      };
      this.getData();
    },
    getData() {
      $http
        .get("/question/query/list/" + this.repositoryType, {
          params: this.tiaojian,
        })
        .then((response) => {
          if (response.success) {
            let name =
              '<span style="color:red">' + this.tiaojian.name + "</span>";
            let table = [];
            let query = {};
            let str = "";
            for (let i = 0; i < response.data.list.length; i++) {
              let query = response.data.list[i];
              query.titleDescription1 = query.titleDescription;
              if (this.tiaojian.name !== "") {
                str = response.data.list[i].titleDescription.replace(
                  this.tiaojian.name,
                  name
                );
                query.titleDescription1 = "<span>" + str + "</span>";
              }
              table.push(query);
            }
            this.tableData = table;
            this.total = response.data.total;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getTixing() {
      $http
        .get("/question/type/query/all")
        .then((response) => {
          if (response.success) {
            let table = [];
            for (let i = 0; i < response.data.length; i++) {
              table.push({
                name: response.data[i].name,
                id: response.data[i].id,
                value: response.data[i].id,
              });
            }
            this.type_tixing = table;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getNandu() {
      $http
        .get("/question/level/query/all")
        .then((response) => {
          if (response.success) {
            let table = [];
            for (let i = 0; i < response.data.length; i++) {
              table.push({
                name: response.data[i].name,
                id: response.data[i].id,
                value: response.data[i].id,
              });
            }
            this.type_nandu = table;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getAll() {
      $http
        .get("/examinee/grade/get/all")
        .then((response) => {
          if (response.success) {
            // let table = []
            // for(let i = 0; i < response.data.length; i++) {
            //   table.push({
            //     name: response.data[i].name,
            //     id: response.data[i].id,
            //     value: response.data[i].id,
            //   })
            // }
            this.type_all = response.data;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getJibie() {
      $http
        .get("/admin/examinee/rank/getlist")
        .then((response) => {
          if (response.success) {
            let table = [];
            for (let i = 0; i < response.data.length; i++) {
              table.push({
                name: response.data[i].name,
                id: response.data[i].id,
                value: response.data[i].id,
              });
            }
            this.type_jibie = table;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getLeibie() {
      $http
        .get("/admin/examinee/department/getlist")
        .then((response) => {
          if (response.success) {
            let table = [];
            for (let i = 0; i < response.data.length; i++) {
              table.push({
                name: response.data[i].name,
                id: response.data[i].id,
                value: response.data[i].id,
              });
            }
            this.type_leibie = table;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getGangwei() {
      $http
        .get("/admin/examiner/position/getlist")
        .then((response) => {
          if (response.success) {
            let table = [];
            for (let i = 0; i < response.data.list.length; i++) {
              table.push({
                name: response.data.list[i].name,
                id: response.data.list[i].id,
                value: response.data.list[i].id,
              });
            }
            this.type_gangwei = table;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getZhuanye() {
      $http
        .get("/examinee/profession/getlist")
        .then((response) => {
          if (response.success) {
            let table = [];
            for (let i = 0; i < response.data.list.length; i++) {
              table.push({
                name: response.data.list[i].name,
                id: response.data.list[i].id,
                value: response.data.list[i].id,
              });
            }
            this.type_zhuanye = table;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    add() {
      this.cailiao = {
        text: "",
        images: [],
      };
      this.imageUrls = [];
      this.xuanze = [
        {
          name: "A",
          title: "",
          value: false,
        },
        {
          name: "B",
          title: "",
          value: false,
        },
        {
          name: "C",
          title: "",
          value: false,
        },
        {
          name: "D",
          title: "",
          value: false,
        },
      ];
      this.form = {
        analyses: "",
        answer: "",
        createDatetime: "",
        departmentId: "",
        id: "",
        levelId: 1, // 难度，必填
        logicallyDelete: "", // 题目状态
        options: "",
        optionsId: "", //选项表id，更新时必传
        positionId: "",
        professionId: "",
        questioner: "",
        rankId: "",
        repositoryId: 1, //仓库类型标识
        title: "", // 问题的图片，多个图片用逗号分隔开
        titleDescription: "", // 问题描述
        titleId: "", // 问题图片表id
        typeId: 1, // 问题类型，必填
      };
      this.dialogFormVisible = true;
    },
    next() {
      // this.dialog_tiaojians = []
      this.cailiao = {
        text: "",
        images: [],
      };
      this.imageUrls = [];
      this.xuanze = [
        {
          name: "A",
          title: "",
          value: false,
        },
        {
          name: "B",
          title: "",
          value: false,
        },
        {
          name: "C",
          title: "",
          value: false,
        },
        {
          name: "D",
          title: "",
          value: false,
        },
      ];
      this.form = {
        analyses: "",
        answer: "",
        createDatetime: "",
        departmentId: "",
        id: "",
        levelId: this.form.levelId, // 难度，必填
        logicallyDelete: "", // 题目状态
        options: "",
        optionsId: "", //选项表id，更新时必传
        positionId: "",
        professionId: "",
        questioner: this.form.questioner,
        rankId: "",
        repositoryId: 2, //仓库类型标识
        title: "", // 问题的图片，多个图片用逗号分隔开
        titleDescription: "", // 问题描述
        titleId: "", // 问题图片表id
        typeId: this.form.typeId, // 问题类型，必填
      };
      this.dialogFormVisible = true;
    },
    xiugai(item) {
      $http
        .get("/question/view/question/detail/" + item.id)
        .then((response) => {
          if (response.success) {
            this.imageUrls = [];
            for (let i in this.form) {
              this.form[i] = response.data[i];
            }
            for (let i = 0; i < this.cailiao.images.length; i++) {
              this.imageUrls.push({
                url: this.cailiao.images[i],
              });
            }
            if (item.typeId === 1 || item.typeId === 2) {
              this.form.optionsId = response.data.questionOptions.id;
              this.xuanze =
                response.data.questionOptions &&
                response.data.questionOptions.options
                  ? JSON.parse(response.data.questionOptions.options)
                  : [];
              if (this.xuanze.length < 4) {
                this.xuanze = [
                  {
                    name: "A",
                    title: "",
                    value: false,
                  },
                  {
                    name: "B",
                    title: "",
                    value: false,
                  },
                  {
                    name: "C",
                    title: "",
                    value: false,
                  },
                  {
                    name: "D",
                    title: "",
                    value: false,
                  },
                ];
              } else {
                this.xuanze.forEach((item) => {
                  item.value = response.data.answer.indexOf(item.name) > -1;
                });
              }
            }
            if (item.typeId === 3) {
              this.form.titleId = response.data.questionTitle.id;
              this.cailiao =
                response.data.questionTitle && response.data.questionTitle.title
                  ? JSON.parse(response.data.questionTitle.title)
                  : {
                      text: "",
                      images: [],
                    };
            }
            console.log("xuanze:", this.xuanze);
            this.dialogFormVisible = true;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    submit() {
      if (!this.yanzheng()) {
        return;
      }
      let str = "";
      let cailiao = {
        text: this.cailiao.text,
        images: [],
      };
      for (let i = 0; i < this.xuanze.length; i++) {
        if (this.xuanze[i].value && str != "") {
          str = str + "," + this.zimu[i];
        }
        if (this.xuanze[i].value && str == "") {
          str += this.zimu[i];
        }
      }
      for (let i = 0; i < this.imageUrls.length; i++) {
        // images = images + ',' + this.imageUrls[i].response.data
        cailiao.images.push(this.imageUrls[i].url);
      }
      if (this.form.typeId == 1 || this.form.typeId == 2) {
        this.form.answer = str;
      } else {
      }
      if (this.form.typeId == 3) {
        this.form.title = JSON.stringify(cailiao);
      }
      let xuanze = [];
      this.xuanze.forEach((item) => {
        xuanze.push({
          name: item.name,
          title: item.title,
        });
      });
      console.log('xuanze:',xuanze)
      this.form.options = xuanze.length ? JSON.stringify(xuanze) : "";
      console.log(this.form);
      if (this.form.id) {
        $httpJSON
          .post("/question/modify", this.form)
          .then((response) => {
            if (response.success) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.tableData[this.index].titleDescription =
                this.form.titleDescription;
              this.tableData[this.index].levelName = this.qiehuan(
                this.form.levelId,
                this.type_nandu,
                "value",
                "name"
              );
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: response.msg,
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        $httpJSON
          .post("/question/add", this.form)
          .then((response) => {
            if (response.success) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.getData();
              // this.dialogFormVisible = false
            } else {
              this.$message({
                message: response.msg,
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    tingyong(val, pd) {
      $http
        .post("/question/modify/status/" + val.id + "?used=" + pd)
        .then((response) => {
          if (response.success) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            val.logicallyDelete = pd;
          } else {
            this.$message({
              message: response.msg,
              type: "error",
              duration: 2000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    shanchu(val, index) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $http
            .post("/question/delete/" + val.id)
            .then((response) => {
              if (response.success) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.tableData.splice(index, 1);
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                  duration: 2000,
                });
              }
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    yanzheng() {
      if (this.form.typeId == "") {
        this.$message.success("请选择题型");
        return false;
      }
      if (this.form.levelId == "") {
        this.$message.success("请选择难度");
        return false;
      }
      if (this.form.titleDescription == "") {
        this.$message.success("请输入题目");
        return false;
      }
      if (this.form.typeId == 1) {
        for (let i = 0; i < this.xuanze.length; i++) {
          if (this.xuanze[i].value) {
            break;
          }
          if (i == this.xuanze.length - 1) {
            this.$message.success("请设置正确答案");
            return false;
          }
        }
      }
      if (this.form.typeId == 2) {
        let j = 0;
        for (let i = 0; i < this.xuanze.length; i++) {
          if (this.xuanze[i].value) {
            j++;
          }
          if (j > 2) {
            break;
          }
          if (i == this.xuanze.length - 1 && j < 2) {
            this.$message.success("多选题请设置最少两个正确答案");
            return false;
          }
        }
      }
      return true;
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(fileList);
      if (res.success) {
        // this.imageUrls = fileList
        this.imageUrls.push({
          url: res.data,
        });
      } else {
        this.$message.error("上传失败");
      }
      console.log(this.imageUrls);
    },
    handleRemove(file, fileList) {
      this.imageUrls = fileList;
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tiaojian.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tiaojian.page = val;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 32px;
  line-height: 32px;
  // display: flex;
  // align-items: center;
}
.top {
  width: 100%;
  // height: 40px;
  padding-bottom: 20px;
  background-color: white;
}
.top-left {
  line-height: 30px;
  font-size: 20px;
  color: #333333;
}
.top-right {
  width: 272px;
  line-height: 30px;
}
.body {
  margin: 24px 0 30px 24px;
  padding: 20px 32px 24px 32px;
  width: calc(100% - 48px);
  // height: calc(100vh - 0px);
  background-color: white;
}
.xuanze-input {
  width: calc(100% - 210px);
}
</style>
